<!--
 Copyright (c) 2012 Climate Code Foundation (climatecode.org)
 Licensed under the MIT License (LICENSE.txt)
-->

<!DOCTYPE html>
<head>
<title>CCF MapView</title>
<link href='css/main.css' rel='stylesheet'/>
<link href='img/globe_tiny.png' rel='icon'/>

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script src='js/jquery.mousewheel.js'></script>
<script src='js/main.js'></script>
<script src='js/remote.js'></script>
<script type="text/javascript" src="js/map.js"></script>
<script type="text/javascript" src="js/chart.js"></script>

<!-- Google charts API -->
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
    google.load('visualization', '1', {packages: ['corechart']});
</script>

</head>
<body onload="init()">
    
    <div class='debug'>
        <div class='dark-shader'></div>
        <div class='debug-text'>
            [ <div onclick='toggle_box(this, "debug")' id='more' style='display:inline; cursor:pointer'>debug</div> ]
            <br/>
            <br/>
            <div id='debug' class='popup' style='font-family: monospace'>
                &gt; [ <div style='display:inline; cursor:pointer;' onclick='map.toggle8kGrid()'>Draw 8k sub-box grid</div> ]
                <br/>
                <br/>
                &gt; bytes loaded: <div id='numBytes' style="display: inline-block">0</div>
                <br/>
                <br/>
                <div id='loadingBox' class='dataList'>
                <div id='dataLoaded'></div>
                </div>
            </div>
        </div>
    </div>

    <div id='map' class='map_container'></div>

    <div class='controls'>
        <div class='left'>
            <div class='shader'></div>
            
            <div class='header'>
                <div class='header-title'>CCF MapView</div>
                <div>Climate Code Foundation</div>
                <br/>
                <div onclick='toggle_box(this, "about")' class='link' id='more' style='display:block'>More &gt;</div>
                <div id='about' class='popup' style='width:400px'>
                    <a href='doc.html'>What is this? How do I use it?</a>
                    <br/>
                    <br/>
                    This is a map visualization of <a href='http://code.google.com/p/ccc-gistemp/' target='_blank'>ccc-gistemp</a>, the <a href='http://climatecode.org/' target='_blank'>Climate Code Foundation</a>'s implementation of the NASA Goddard Institute for Space Studies (GISS) Surface Temperature Analysis (<a href='http://data.giss.nasa.gov/gistemp/' target='_blank'>GISTEMP<a/>).
                    <br/>
                    <br/>
                    The map shows global yearly temperatures from 1880 to 2010, represented as the difference from the baseline period (1950 - 1980), where red indicates warmer temperatures and blue indicates cooler temperatures. You can choose from temperature sets computed over land (by fixed land-based climate stations), over the ocean, or the full mixed set. Other available data include major population centers and weather stations. Click a weather station pin to see more information and the historical temperature record for that station.
                    <br/>
                    <br/>
                    Click and drag to move the map. Zoom by using the [+] and [-] buttons, the mouse wheel, or by double clicking on the map.
                    <br/>
                    <br/>
                    This project is open source under the MIT License and available at <a href='http://code.google.com/p/ccf-mapview' target='_blank'>code.google.com/p/ccf-mapview</a>. We use <a href='http://www.naturalearthdata.com' target='_blank'>Natural Earth Data</a>, which is a great resource and in the public domain. Parts of the rendering were inspired by <a href='https://github.com/RandomEtc/shapefile-js' target='_blank'>shapefile-js</a>. If you have comments, questions, feedback, or want to contribute, we can be found at <a href='http://code.google.com/p/ccf-mapview' target='_blank'>code.google.com/p/ccf-mapview</a>.
                    <br/>
                    <br/>
                    <a href='http://www.naturalearthdata.com' target='_blank'><img src='img/NED_logo.png' style='width: 180px'/></a>
                </div>
            </div>
            
            <br/>
            <div class='control-nav'> <!-- zooming -->
                <div class='btn' onclick='zoom(2)'>+</div>
                <div class='btn' onclick='zoom(0.5)'>-</div>
                <div id='zoom' style="display: inline-block">4</div>x
            </div>
            <div class='control-data'> <!-- data controls -->
                <br/>
                <div class='btn' onclick="toggle(this, 'coordinates')" id='coordinates_btn'>Coordinates</div>
                <br/>
                <br/>
                <div onclick="toggle_box(this, 'extra_data')" class='link' style='display:block'>Extra &gt;</div>
                <div id='extra_data' class='popup'>
                    <div class='btn' onclick="toggle(this, 'topo')">topography</div>
                    <br/>
                    <div class='btn' onclick="toggle(this, 'radiance')">night light radiance</div>
                </div>
                <br/>
                <div class='btn' onclick="toggle(this, 'populated')" id='cities_btn'>cities</div>
                <br/>
                <div class='btn' onclick="toggle(this, 'stations')" id='stations_btn'>weather stations</div>
                <br/>
                <br/>
                <div style='width:10px; height:10px; background-color:#FF8800; border:1px solid #000000; display:inline-block;'></div> Urban
                <div style='width:10px; height:10px; background-color:#FFFF00; border:1px solid #000000; display:inline-block;'></div> Suburb
                <div style='width:10px; height:10px; background-color:#00FF00; border:1px solid #000000; display:inline-block;'></div> Rural
                <br/>
                <br/>
                <div id='yearval'>2010</div>
                <input type="range" id='year' min="1880" max="2010" value='2010' class='slider' onchange='changeYear(0)'/>
                <br/>
                <div class='btn' onclick="changeYear(-1)">&lt;</div>
                <div class='btn' id='playpause' onclick="playpause()">Play</div>
                <div class='btn' onclick="changeYear(1)">&gt;</div>
                <br/>
                Temps:
                <div class='btn' id='oceanTemp' onclick="radio(this)">Ocean</div>
                <div class='btn' id='landTemp' onclick="radio(this)">Land</div>
                <div class='btn' id='mixedTemp' onclick="radio(this)">Mixed</div>
            </div>
            
            <div style='margin-left: 10px'>
                <div style='width: 150px; height:20px; position:relative'>
                    <div style='display:inline-block; position:absolute; left:0px'>-5&deg;C</div>
                    <div style='display:inline-block; position:absolute; width:150px; margin:auto; text-align:center'>0&deg;C</div>
                    <div style='display:inline-block; position:absolute; right:0px'>5&deg;C</div>
                </div>
                <canvas id='colorLegend' style='width:150px; height:60px; border:1px solid #000000'></canvas>
                <script>
                    /*
                        Draws the temperature color key on the above canvas
                    */
                    (function() {
                        var c = document.getElementById('colorLegend');
                        c.width = 150;
                        c.height = 60;
                        var ctx = c.getContext('2d');
                        
                        ctx.fillStyle = '#99AA77';
                        ctx.fillRect(0, 0, 150, 30);
                        ctx.fillStyle = '#AABBFF';
                        ctx.fillRect(0, 30, 150, 60);
                        
                        // create linear gradient
                        var tempgrad = ctx.createLinearGradient(0,0,150,0);
                        tempgrad.addColorStop(0, 'rgba(0, 0, 180, 0.7)');
                        tempgrad.addColorStop(0.4, 'rgba(100, 100, 255, 0.7)');
                        tempgrad.addColorStop(0.5, 'rgba(255, 255, 255, 0.5)');
                        tempgrad.addColorStop(0.6, 'rgba(255, 100, 100, 0.7)');
                        tempgrad.addColorStop(1, 'rgba(180, 0, 0, 0.7)');

                        ctx.fillStyle = tempgrad;
                        ctx.fillRect(0,0,150,60);
                        
                        ctx.fillStyle = '#FFFFFF';
                        ctx.textBaseline = 'middle';
                        ctx.fillText('Land', 0, 15);
                        ctx.fillText('Ocean', 0, 45);
                     })();
                </script>
            </div>
        </div>
        <div id='anno' class='right' style='display:none'>
            <div class='closeBtn' onclick='hideAnno()'>X</div>
            <div id='annoText' style='display:inline-block'></div>
            <br/>
            <div id='chartTypes' style='display:inline-block'><input type='radio' name='graphType' value='year' checked onclick='changeChart("year")'> Yearly  <input type='radio' name='graphType' value='month' onclick='changeChart("month")'> Monthly</div>
            <br/>
            <div id='annoGraph' style='display:inline-block; width:500px'></div> <!-- for google chart API -->
        </div>
    </div>
</body>
</html>
